<!--
* @description 2020单位年报
* @author zywu
* @date 2021/01/05 10:57:05
!-->
<template>
  <div :class="{'is-end':active==lastPageIndex-1,'in-frame':inFrame}" class="page-wrapper-u page-box">
    <img
      v-if="active>0&&active<lastPageIndex-1"
      src="/ilink-app-h5-zd/static/img/ilink_1577974369449.png"
      alt
      class="slideIcon"
      @click="handleSlide()"
    />
    <img
      class="btn-audio"
      :class="{ 'audio-playing':!audioPaused }"
      :src="audioPaused?iconAudioPaused:iconAudioPlaying"
      @click="handlePlayAudio"
    />
    <audio ref="audio" src="/ilink-app-h5-zd/static/img/ilink_1578636140500.mp3" loop autoplay style="display: none;"></audio>

    <div class="page-inner" :style="{transform:transform}">
      <cover :org-name="orgName" @start="handleStart" :report-data="reportData"></cover>
      <join :active="active==1" :report-data="reportData"></join>
      <run :active="active==2" :report-data="reportData"></run>
      <facilities :active="active==3" :report-data="reportData"></facilities>
      <handle-time :active="active==4" :report-data="reportData"></handle-time>
      <maintain :active="active==5" :report-data="reportData"></maintain>
      <duty :active="active==6" :report-data="reportData"></duty>
      <electric-car v-if="showElectricCar" :active="active==7" :report-data="reportData"></electric-car>
      <gas-tank v-if="showGasTank" :active="activeGasTank" :report-data="reportData"></gas-tank>
      <safe-passage v-if="showSafePassage" :active="activeSafePassage" :report-data="reportData"></safe-passage>
      <inspection :active="active==lastPageIndex-4" :report-data="reportData"></inspection>
      <hidden-danger :active="active==lastPageIndex-3" :report-data="reportData"></hidden-danger>
      <exam :active="active==lastPageIndex-2" :report-data="reportData"></exam>
      <end :active="active==lastPageIndex-1" @share="handleSlide" :report-data="reportData"></end>
      <share :active="active==lastPageIndex" :report-data="reportData"></share>
    </div>

    <div v-if="active==5" class="page_6_img">
      <img src="/ilink-app-h5-zd/static/img/ilink_1577975229699.png" class="page_6_img_1" />
      <img src="/ilink-app-h5-zd/static/img/ilink_1577975243858.png" class="page_6_img_2" />
    </div>
  </div>
</template>

<script>
import { loadEcharts, loadEchartsGL } from '@/utils/loadEcharts'
import 'animate.css'
import Cover from './Cover'
import Join from './Join'
import Run from './Run'
import Facilities from './Facilities'
import HandleTime from './HandleTime'
import Maintain from './Maintain'
import Duty from './Duty'
import ElectricCar from './ElectricCar'
import GasTank from './GasTank'
import SafePassage from './SafePassage'
import Inspection from './Inspection'
import HiddenDanger from './HiddenDanger'
import Exam from './Exam'
import End from './End'
import Share from './Share'
import { getPlatFormYearReport } from '@/api/yearReport'
let pageHeight = 736
let pageBox = null
let pageItem = []
let touchStart = 0
let maxMove = 50
export default {
  components: {
    Cover,
    Join,
    Run,
    Facilities,
    HandleTime,
    Maintain,
    Duty,
    ElectricCar,
    GasTank,
    SafePassage,
    Inspection,
    HiddenDanger,
    Exam,
    End,
    Share,
  },
  data() {
    return {
      audioPaused: false,
      iconAudioPlaying: '/ilink-app-h5-zd/static/img/ilink_1578635133524.png',
      iconAudioPaused: '/ilink-app-h5-zd/static/img/ilink_1578636317658.png',
      orgName: '',
      active: 0,
      reportData: {
        joinTime: {},
        hiddenDanger: {},
      },
      pageNum: 15,
      showElectricCar: true, //电瓶车
      showGasTank: true, //煤气罐
      showSafePassage: true, // 消防通道
      inFrame: false,
      height: 0,
    }
  },
  computed: {
    transform() {
      return 'translateY(-' + this.height * this.active + 'px)'
    },
    activeGasTank() {
      if (!this.showElectricCar) return this.active == 7
      return this.active == 8
    },
    activeSafePassage() {
      if (!this.showElectricCar && this.showGasTank) return this.active == 8
      if (this.showElectricCar && !this.showGasTank) return this.active == 8
      if (!this.showElectricCar && !this.showGasTank) return this.active == 7
      return this.active == 9
    },
    lastPageIndex() {
      return this.pageNum - 1
    },
  },
  created() {
    loadEcharts().then(() => {
      loadEchartsGL().then(() => {
        this.getData()
      })
    })
    this.inFrame = !!this.$route.query.inFrame
    // this.pageHeight = document.documentElement.clientHeight - (this.inFrame ? 43 : 0)
    window.aaa = (index = 0) => {
      this.active = index
    }
  },
  mounted() {
    pageItem = document.getElementsByClassName('section') //3
    pageBox = document.getElementsByClassName('page-box')
    this.addTouchEvent()
    window.onresize = () => {
      this.computeHeight()
    }
    this.computeHeight()
  },
  methods: {
    computeHeight() {
      if (window != top) {
        var u = navigator.userAgent
        if (u.indexOf('iPhone') > -1 || u.indexOf('iOS') > -1) {
          this.height = Number(window.document.body.offsetHeight + 38)
        } else {
          this.height = Number(document.documentElement.clientHeight)
        }
      } else {
        this.height = Number(document.documentElement.clientHeight)
      }
      Array.prototype.forEach.call(pageItem, (element, i) => {
        element.style = 'height:' + this.height + 'px'
      })
      document.querySelector('.page-box').style.height = this.height + 'px'
    },
    getData() {
      getPlatFormYearReport({
        id: this.$route.query.reportId || 3413,
      }).then((res) => {
        let data = JSON.parse(JSON.parse(this.xxbubs(res.data)))
        this.orgName = data.orgName

        // data.dpcInfo = {
        // 	//新增电瓶车上楼
        // 	dataTotal: 345186, //总数据量
        // 	fcfSize: 4, //设备个数，为0不展示该页面
        // 	serverTime: 5753, //服务总时长（小时）
        // 	alarmTotal: 2, //报警总次数
        // 	monthCount: [
        // 		//每月报警情况
        // 		{
        // 			total: 1, //次数
        // 			month: 5, //月份
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 6,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 7,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 8,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 9,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 10,
        // 		},
        // 		{
        // 			total: 1,
        // 			month: 11,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 12,
        // 		},
        // 	],
        // }

        // data.mqgInfo = {
        // 	//新增煤气罐信息
        // 	dataTotal: 345186, //总数据量
        // 	fcfSize: 4, //设备个数，为0不展示该页面
        // 	serverTime: 5753, //服务总时长（小时）
        // 	alarmTotal: 2, //报警总次数
        // 	monthCount: [
        // 		//每月报警情况
        // 		{
        // 			total: 1, //次数
        // 			month: 5, //月份
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 6,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 7,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 8,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 9,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 10,
        // 		},
        // 		{
        // 			total: 1,
        // 			month: 11,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 12,
        // 		},
        // 	],
        // }

        // data.tdzsInfo = {
        // 	//新增通道阻塞数据
        // 	dataTotal: 345186, //总数据量
        // 	fcfSize: 4, //设备个数，为0不展示该页面
        // 	serverTime: 5753, //服务总时长（小时）
        // 	alarmTotal: 2, //报警总次数
        // 	monthCount: [
        // 		//每月报警情况
        // 		{
        // 			total: 1, //次数
        // 			month: 5, //月份
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 6,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 7,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 8,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 9,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 10,
        // 		},
        // 		{
        // 			total: 1,
        // 			month: 11,
        // 		},
        // 		{
        // 			total: 0,
        // 			month: 12,
        // 		},
        // 	],
        // }

        this.showElectricCar = data.dpcInfo && data.dpcInfo.fcfSize > 0
        this.showGasTank = data.mqgInfo && data.mqgInfo.fcfSize > 0
        this.showSafePassage = data.tdzsInfo && data.tdzsInfo.fcfSize > 0

        if (!this.showElectricCar) this.pageNum--
        if (!this.showGasTank) this.pageNum--
        if (!this.showSafePassage) this.pageNum--

        this.reportData = data
        console.log(data)
      })
    },
    xxbubs(str) {
      str = str.replace('f6ae12c1671b4ce48c3f90e9dd9d7608', '')
      return decodeURIComponent(
        atob(str)
          .split('')
          .map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
          })
          .join('')
      )
    },
    handleStart() {
      this.handleSlide()
    },
    handlePlayAudio() {
      this.audioPaused = !this.audioPaused
      this.$refs.audio[this.audioPaused ? 'pause' : 'play']()
    },
    handleSlide(step = 1) {
      this.active = this.active + step
    },
    addTouchEvent() {
      pageBox[0].addEventListener(
        'touchstart',
        (e) => {
          touchStart = e.changedTouches[0].clientY
          if (this.active > 0) {
            //首页关闭滑动事件
            pageBox[0].addEventListener(
              'touchmove',
              this.touchmovehandle,
              false
            )
            pageBox[0].addEventListener('touchend', this.touchendhandle, false)
          }
        },
        false
      )
    },
    touchendhandle() {
      touchStart = 0
      this.removeEvent()
    },
    removeEvent() {
      pageBox[0].removeEventListener('touchmove', this.touchmovehandle)
      pageBox[0].removeEventListener('touchend', this.touchendhandle)
    },
    touchmovehandle(e) {
      var clientY = e.changedTouches[0].clientY
      var changeIndex = clientY > touchStart ? -1 : 1
      if (
        Math.abs(clientY - touchStart) > maxMove &&
        this.active + changeIndex >= 0 &&
        this.active + changeIndex <= this.pageNum - 1
      ) {
        touchStart = 0
        this.handleSlide(changeIndex)
        this.removeEvent()
      }
    },
  },
}
</script>